<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<!--
   actions:用户的各种操作   state：状态（状态保存在变量里面）   view：视图层
   1.单界面状态管理：state通过template展示在view上面，view上面发生一些actions，发生actions会改变state
     是一个循环的过程。在单界面中，state就是data里的变量数据
     
   2.多界面状态管理
       - 安装vuex插件
           npm install vuex --save
       - 在src文件夹中创建store文件夹，里面再建index.js文件：
       - 安装插件
           Vue.use(Vuex)
       - 创建对象
            const store=new Vuex.store({
            })
       - 导出store
            export default store
       - 在main.js中挂载store ，这样内部会在vue的原型中进行赋值：
           Vue.prototype.$store=store
           这样在所有组件就可以使用store了
         
    3. devtools:是vue开发的一个浏览器插件，为我们记录每次改变state的状态，
       这样如果有多个组件来修改state的数据，如果有错误我们就可以知道是哪个组件改错了
       
       - 安装devtools:浏览器——更多工具——扩展——Chrome web store商店——搜devtools
       ——选择vue.js devtools
       
    4. 如何在组件里修改state里的数据呢？
        如果有异步操作：
        组件 ——actions——mutation——state
        同步可以直接：组件直接通过mutation修改state里的数据
        组件——mutation——state
        
     5.我们来对使用步骤，做一个简单的小节：
        - 提取出一个公共的store对象，用于保存在多个组件中共享的状态
        - 将store对象放置在new Vue对象中，这样可以保证在所有的组件中都可以使用到
        - 在其他组件中使用store对象中保存的状态即可
            通过this.$store.state.属性的方式来访问状态
            通过this.$store.commit('mutation中方法')来修改状态
        
        注意事项：
        我们通过提交mutation的方式，而非直接改变store.state.count。
        这是因为Vuex可以更明确的追踪状态的变化，所以不要直接改变store.state.count的值。

        
    
-->
</body>
</html>